<!DOCTYPE html>
<html>
    <head>
        <title>tablink</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/bootstrap-icons-1.9.1/fonts/bootstrap-icons.woff" rel="stylesheet">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script type="text/javascript" src="/static/jquery-3.6.0.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
        <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
        <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
        <!--[if lt IE 9]>
       <![endif]-->
    </head>
    <body style="background-color:;">
        <div class="container-fluid">
          <div class="row">
            <div class="col-2">
            </div>
            <div id="search_div" class="col-8">
        <!--<form id="bookmarkerForm" method="POST" action="edit/">{% csrf_token %}
            {{form.as_p}}
            <input type="submit" name="ok" value="Ok">
            <input type="button" name="cancel" value="Cancel">
        </form>-->
            <form id="bookmarkerForm" method="POST" action="edit/">{% csrf_token %}
              <div class="mb-3 row">
                <label for="url" class="col-sm-1 col-form-label">URL</label>
                <div class="col-sm-11">
                  <input type="text" class="form-control" id="url" name="url">
                </div>
              </div>
              <div class="mb-3 row">
                <label for="title" class="col-sm-1 col-form-label">Title</label>
                <div class="col-sm-11">
                  <input type="text" class="form-control" id="title" name="title">
                </div>
              </div>
              <div class="mb-3 row">
                <label for="domain" class="col-sm-1 col-form-label">Domain</label>
                <div class="col-sm-11">
                  <input type="text" class="form-control" id="domain" name="domain">
                </div>
              </div>
              <div class="mb-3 row">
                <div class="col-sm-12">
                        <input type="submit" name="ok" value="Ok">
                        <input type="button" name="cancel" value="Cancel">
                </div>
              </div>
            </form>
            </div>
            <div class="col-2">
            </div>
          </div>
          <div class="row">
            <div class="col-2">
              <ul>
                <li>新增书签</li>
                <li>批量新增</li>
                <li>批量删除</li>
              </ul>
              <div id="uploads">
                <form id="uploadForm" method="POST" enctype="multipart/form-data" action="upload/">{% csrf_token %}
                  {{uploadForm}}
                  <input type="submit" name="submit" value="Submit">
                </form>
              </div>
            </div>
            <div class="col-8">
                <!--{% for domain in list  %}
                    <div id="{{domain.domain}}" class="card text-left" style="width:;">
                      <div class="card-header">
                        {{domain.domain}}
                      </div>
                      <div class="list-group list-group-flush">
                        {% for bookmarker in domain.bookmarker.all %}
                        <a class="list-group-item list-group-item-action list-group-item-light d-flex justify-content-between align-items-center" target='_blank' href="{{bookmarker.url}}">{{bookmarker.title}}</a>
                        {%endfor%}
                      </div>
                    </div><br>
                {% endfor %}-->
                {% for domain in list  %}
                    <div id="{{domain.domain}}" class="card text-left" style="width:;">
                      <div class="card-header">
                        {{domain.domain}}
                        {% if domain.bookmarker.all %}
                        {% else %}
                        <span><a href="del/domain/{{domain.id}}">删除</a></span>
                        {% endif %}
                      </div>
                      <ul class="list-group list-group-flush">
                        {% for bookmarker in domain.bookmarker.all %}
                        <li class="list-group-item list-group-item-action list-group-item-light d-flex justify-content-between align-items-center">
                          <a target='_blank' href="{{bookmarker.url}}" style="width:95%">{{bookmarker.title}}</a><a href="del/bm/{{bookmarker.id}}">删除</a>
                        </li>
                        {%endfor%}
                      </ul>
                    </div><br>
                {% endfor %}
            </div>
            <div class="col-2">
              <div>
                  <a class="nav-link position-fixed" href="#search_div"><b>Top^</b></a>
                  <div class="card" style="width: 18rem;">
                   <div class="card-body">
                     <h5 class="card-title">statistic</h5>
                     <p class="card-text">
                      domain:<span>{{list|length}}</span><br>
                      <!--urls:<span>{&&url_sum&&}</span></p>-->
                   </div>
                  </div>
                  <div class="scrollspy-example bg-light p-3 rounded-2">
                    <ul>
                      {% for domain in list  %}
                          <li><a class="nav-link" href="#{{domain.domain}}">{{domain.domain}}<span class="badge bg-secondary">{{domain.bookmarker.all|length}}</span></a></li>
                      {% endfor %}
                    </ul>
                  </div>
              </div>
            </div>
          </div>
        </div>
    </body>
</html>